<template>
  <div class="home">
    <a-space>
      <a-button type="primary" @click="visible = true">
        新增 {{ visible }}
      </a-button>
    </a-space>
    <form-modal @ok="onOk" v-if="visible" :formData="form" :formList="formList" :isDisabled="isDisabled"></form-modal>
    <a-divider />
    <ex-table @onEvent="onEvent" @change="getTableData" :tableData="tableData" :loading="loading"
      :pagination="pagination"></ex-table>
  </div>
</template>

<script>
import FormModal from './../components/formModal';
import ExTable from './../components/exTable'
export default {
  components: {
    FormModal,
    ExTable
  },
  data() {
    return {
      visible: false,
      loading: false,
      isDisabled: false,
      form: {},
      formList: [
        {
          label: '设备名称',
          prop: 'name',
          type: 'text',
          rules: false,
          suffix: 'RMB'
        },
        {
          label: '主机名称',
          prop: 'hostName',
          type: 'text',
          rules: false,
        },
        {
          label: '长度',
          prop: 'length',
          type: 'number',
          min: -Infinity,
          max: Infinity,
          rules: false,
          suffix: ''
        },
        {
          label: '厂家类型',
          prop: 'type',
          type: 'select',
          rules: false,
          value: 'value',
          field: 'name',
          options: [{ name: '浙江杰昆1', value: 1 }, { name: '浙江杰昆2', value: 2 }, { name: '浙江杰昆3', value: 3 }]
        },
        {
          label: '选择日期',
          prop: 'time',
          rules: false,
          type: 'range-picker',
          format: 'YYYY-MM-DD HH:mm:ss'
        },
        {
          label: '选择时间',
          prop: 'times',
          rules: false,
          type: 'date-picker',
          format: 'YYYY-MM-DD HH:mm:ss'
        },
        {
          label: '省市区级联',
          prop: 'select',
          type: 'cascader',
          rules: false,
          options: [
            {
              value: 'zhejiang',
              label: 'Zhejiang',
              children: [
                {
                  value: 'hangzhou',
                  label: 'Hangzhou',
                  children: [
                    {
                      value: 'xihu',
                      label: 'West Lake',
                    },
                  ],
                },
              ],
            },
            {
              value: 'jiangsu',
              label: 'Jiangsu',
              children: [
                {
                  value: 'nanjing',
                  label: 'Nanjing',
                  children: [
                    {
                      value: 'zhonghuamen',
                      label: 'Zhong Hua Men',
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          label: '开关',
          prop: 'switch',
          rules: false,
          type: 'switch'
        },
        {
          label: '单选框',
          prop: 'radio',
          type: 'radio',
          rules: false,
          value: 'value',
          field: 'name',
          options: [
            { name: '选项一', value: 1 },
            { name: '选项二', value: 2 },
            { name: '选项三', value: 3 }
          ]
        },
        {
          label: '多选框',
          prop: 'checkbox',
          type: 'checkbox',
          rules: true,
          field: 'label',
          value: 'id',
          options: [
            { label: '选项一', id: 111 },
            { label: '选项二', id: 222 },
            { label: '选项三', id: 333 }
          ]
        },
      ],
      tableData: [],
      pagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      }
    };
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    getTableData() {
      this.pagination.total = 100
      this.loading = true
      this.tableData = []
      for (let i = 0; i < this.pagination.pageSize; i++) {
        this.tableData.push({
          name: '光纤' + i,
          type: 1,
          id: 1 + i,
          length: 10 + i,
          hostName: '交换机' + i,
          select: 'xihu',
          times: '2024-12-03 22:23:30',
          time: ['2024-12-03 22:23:30', '2025-12-03 22:23:30']
        })
      }
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    onOk(val) {
      this.visible = false
      if (val) {
        console.log(val)
      }
      this.form = null
      this.isDisabled = false
    },
    onEvent(val, type) {
      if (type) {
        this.form = val
        this.isDisabled = true
        this.visible = true
      } else {
        if (val.id) {
          this.form = val
          this.visible = true
        } else {
        }
      }

    }
  }

}
</script>

<style lang="less" scoped>
.home {
  padding: 20px 30px;
}
</style>
